<template>
<view class="page">
	<view class="header-box">
		<view class="left">
			<image :src="logo" class="shop-avatar" mode=""></image>
			<view class="info">
				<view class="item1">
					{{ info.shop_name }}
				</view>
				<view class="item2">
					{{ info.address }}
				</view>
			</view>
		</view>
		<view class="icon-close-box" @click="closePage">
			<image src="/static/images/mallShop/close.png" class="icon-close" mode=""></image>
		</view>
	</view>
	<MallGoods v-if="goodsList.length > 0" :goodsList="goodsList" class="mt30"></MallGoods>
	
	<view class="empty" v-if="empty">
		<img src="/mall/static/images/no-goods.png" alt="">
		暂无相关商品
	</view>
</view>
</template>

<script>
	import MallGoods from '@/components/mallGoods/mallGoods'
	import { isLogin, shopDetail } from '@/api/substitution.js'
	
	export default {
		components:{
			MallGoods
		},
		data(){
			return {
				goodsList:[],
				info: '',
				logo: '',
				
				ruleForm: {
					shop_id: '',
					page: 1
				},
				total: 0,
				empty: false
			}
		},
		methods: {
			bankBtn(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad(e) {
			isLogin()
			
			uni.showLoading({
				mask: true
			})
			
			this.ruleForm.shop_id = e.id
			this.details()
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			this.ruleForm.page = 1;
			this.details()
		},
		
		// 上拉加载
		onReachBottom() {
			if (this.ruleForm.page < this.total) {
				this.ruleForm.page += 1;
				this.details()
			}
		},
		
		methods: {
			
			// 关闭页面
			closePage () {
				uni.navigateBack()
			},
			
			// 商家详情
			details () {
				// 获取商家信息
				shopDetail(this.ruleForm).then(t => {
					this.info = t.data.detail
					this.logo = t.data.detail.logo.file_path
					this.total = t.data.goods.last_page
					if (this.ruleForm.page === 1) {
						if (t.data.goods.data.length === 0) {
							this.empty = true
						} else {
							this.empty = false
						}
						this.goodsList = t.data.goods.data
					} else {
						t.data.goods.data.forEach(item => {
							this.goodsList.push(item)
						})
					}
						console.log(this.goodsList)
					uni.stopPullDownRefresh()
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
	}
	.header-box{
		display: flex;
		padding:50rpx 30rpx 20rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		z-index: 9;
		box-sizing: border-box;
		.left{
			display: flex;
			flex:1;
			.item1{
				color: #333333;
				font-size: 36rpx;
			}
			.item2{
				color: #666666;
				font-size: 26rpx;
				margin-top: 4rpx;
			}
			.shop-avatar{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.icon-close{
			width: 38rpx;
			height: 38rpx;
		}
	}
	.mt30{
		margin-top: 180rpx;
		
	}
	
	.empty {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #333;
			
		img {
			width: 300rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
